<template>
  <div>
    <van-nav-bar title="支付成功" left-text="返回" left-arrow @click-left="onClickLeft" />
  
    <div class="success-container">
      <!-- 成功图标 -->
      <img src="../../../assets/img/支付成功.png" alt="支付成功" class="success-icon">
  
      <!-- 支付金额 -->
      <div class="amount">
        ¥{{ (paymentAmount).toFixed(2) }}
      </div>
  
      <!-- 状态提示 -->
      <div class="status-text">
        <p class="success">支付成功！</p>
        <p class="tips">订单正在处理中，请稍后查看订单状态</p>
      </div>
  
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <van-button round type="default" class="btn" @click="goToHome">
          返回首页
        </van-button>
        <van-button round type="primary" class="btn" @click="viewOrders">
          查看订单
        </van-button>
      </div>
    </div>
  </div>
</template>
   
<script>
import { NavBar, Button } from 'vant';

export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button
  },
  data() {
    return {
      // successImage: require('@/assets/img/success.png'),
      paymentAmount: 0
    };
  },
  mounted() {
    // const query = this.$route.query || {};
    // this.paymentAmount = Number(query.amount) || 0;
    // if (query.image) {
    //   this.successImage = require(`@/assets/${query.image}`);
    // }
    const amount = this.$route.query.amount;
    this.paymentAmount = Number(amount) || 0; // 转换为数字
  },
  methods: {
    viewOrders() {
      this.$router.push('/order/list');
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    goToHome() {
      this.$router.push('/');
    }
  }
};
</script>
   
<style lang="less" scoped>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;

  .success-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
  }

  .amount {
    font-size: 36px;
    color: #ff6600;
    font-weight: bold;
    margin: 15px 0;
  }

  .status-text {
    text-align: center;
    margin: 20px 0;

    .success {
      font-size: 24px;
      color: #333;
      margin-bottom: 10px;
    }

    .tips {
      font-size: 14px;
      color: #999;
    }
  }

  .action-buttons {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 40px;

    .btn {
      width: 45%;
      height: 44px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>
